<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>系统配置信息</span>
        </div>
      </template>
      
      <el-descriptions title="环境配置信息" :column="1" border>
        <el-descriptions-item label="NODE_ENV">{{ envInfo.nodeEnv }}</el-descriptions-item>
        <el-descriptions-item label="BASE_API">{{ envInfo.baseApi }}</el-descriptions-item>
        <el-descriptions-item label="应用模式">{{ envInfo.mode }}</el-descriptions-item>
        <el-descriptions-item label="Vue版本">{{ envInfo.vueVersion }}</el-descriptions-item>
        <el-descriptions-item label="Element Plus版本">{{ envInfo.elementVersion }}</el-descriptions-item>
      </el-descriptions>
      
      <el-divider></el-divider>
      
      <div class="button-container">
        <el-button type="primary" @click="testApiConnection">测试API连接</el-button>
        <el-button type="warning" @click="clearCache">清除缓存</el-button>
      </div>
      
      <el-collapse v-if="apiTestResult">
        <el-collapse-item title="API连接测试结果" name="1">
          <pre>{{ JSON.stringify(apiTestResult, null, 2) }}</pre>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios';
import { version as vueVersion } from 'vue';
import { version as elementVersion } from 'element-plus';
import { ElMessage } from 'element-plus';
import { reactive, toRefs } from 'vue';
import cache from '@/plugins/cache';

export default {
  name: "SystemInfo",
  setup() {
    const state = reactive({
      envInfo: {
        nodeEnv: import.meta.env.MODE,
        baseApi: import.meta.env.VITE_APP_BASE_API || '未配置',
        mode: import.meta.env.MODE,
        vueVersion,
        elementVersion
      },
      apiTestResult: null
    });
    
    // 测试与后端的API连接
    const testApiConnection = async () => {
      state.apiTestResult = { status: 'testing', timestamp: new Date().toISOString() };
      
      try {
        // 测试连接
        const response = await axios.get(import.meta.env.VITE_APP_BASE_API + '/monitor/server/info', {
          timeout: 5000
        });
        
        state.apiTestResult = {
          status: 'success',
          timestamp: new Date().toISOString(),
          data: response.data,
          requestInfo: {
            url: import.meta.env.VITE_APP_BASE_API + '/monitor/server/info',
            method: 'GET',
            headers: response.headers
          }
        };
      } catch (error) {
        state.apiTestResult = {
          status: 'error',
          timestamp: new Date().toISOString(),
          message: error.message,
          config: error.config,
          details: {
            baseUrl: import.meta.env.VITE_APP_BASE_API,
            name: error.name,
            stack: error.stack,
          }
        };
      }
    };
    
    // 清除浏览器缓存
    const clearCache = () => {
      // 清除本地缓存
      cache.local.clear();
      // 清除会话缓存
      cache.session.clear();
      
      ElMessage.success('缓存已清除，请刷新页面');
    };
    
    return {
      ...toRefs(state),
      testApiConnection,
      clearCache
    };
  }
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button-container {
  margin: 20px 0;
}

.button-container .el-button {
  margin-right: 10px;
}

pre {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 12px;
  margin: 0;
  overflow: auto;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;
  color: #303133;
}
</style> 